/**
 * 电子卷卡片组件 - leo
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet, Text, View
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class CardWoucherCard extends Component {
  static propTypes = {
    endTime: PropTypes.string,
    price: PropTypes.number,
    status: PropTypes.string.isRequired
  };

  static defaultProps = {
    endTime: '',
    price: ''
  };

  render() {
    const { endTime, price, status } = this.props;
    return (
      <View style={styles.container}>
        <View style={{ flex: 1 }}>
          <LinearGradient
            start={{ x: 1, y: 0 }}
            end={{ x: 0.1, y: 0.65 }}
            colors={['#46bfdd', '#1a77be']}
            style={styles.linearGradient}
          >
            <View style={styles.welcomeView}>
              <View style={styles.welcomeTitle}>
                <Text style={styles.welcomePrice}><Text style={styles.welcomeTitleSymbol}>￥</Text>1</Text>
                <Text style={styles.welcomeType}>电子券</Text>
              </View>
              <View style={styles.welcomeSubTitle}>
                <Text style={styles.welcomeSubTitleText}>1 YUANR COUPON</Text>
              </View>
            </View>
          </LinearGradient>
          <View style={styles.titleWrap}>
            <View style={styles.titleRow}>
              <Text style={styles.title}>有效期至：{endTime}</Text>
            </View>
            <View style={styles.titleRow}>
              <Text style={styles.price}>
                {price}元({status})
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
  },
  linearGradient: {
    flex: 1,
    borderRadius: 10
  },
  welcomeView: {
    // height: 160,
    paddingTop: SCALE(50),
    paddingBottom: SCALE(30),
    alignItems: 'center',
    justifyContent: 'center',
    // backgroundColor: '#045187',
  },
  welcome: {
    color: '#fff',
    fontSize: 60
  },
  welcomeTitle: {
    width: '65%',
    paddingLeft: 10,
    paddingRight: 10,
    marginBottom: 0,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },
  welcomePrice: {
    fontWeight: 'bold',
    fontSize: 50,
    color: '#fff'
  },
  welcomeTitleSymbol: {
    fontSize: 18,
  },
  welcomeType: {
    position: 'relative',
    top: 22,
    fontSize: 28,
    color: '#fff'
  },
  welcomeSubTitle: {
    width: '65%',
    height: SCALE(40),
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  welcomeSubTitleText: {
    textAlign: 'center',
    color: '#1a77be'
  },
  titleWrap: {
    marginTop: SCALE(20),
    // backgroundColor: '#FFF',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: SCALE(24),
    paddingRight: SCALE(24),
  },
  titleRow: {
    padding: 5
  },
  title: {
    fontSize: 14,
    color: '#4b4b4b'
  },
  price: {
    fontSize: 14,
    color: '#4b4b4b',
    textAlign: 'right'
  }
});
